<template>
    <div class="my-home">
        <div class="top flex-between">
            <div class="left">
                <MyContent title="月度人员变动及成本" timg="1" height="557px">
                    <MyList :head="ydryData.head" :data="ydryData.data" />
                </MyContent>
                <MyContent title="公司总员工各区间收入 " timg="1" height="561px" :btn="btn2" :btnValue="qjsrData.search" @change="(value)=>qjsrData.search = value">
                    <div class="progress-list">
                        <div class="progress-item" v-for="(item, index) in qjsrData[qjsrData.search=='last_month'?'monthData':'yearData']" :key="index">
                            <div class="flex-between">
                                <div>{{item.range}}</div>
                                <div class="num">{{item.count}}人</div>
                            </div>
                            <div class="progress">
                                <div class="active" :style="{width: (item.count / employeeTotal * 100) +'%'}"></div>
                            </div>
                        </div>
                    </div>
                </MyContent>
                <MyContent title="人员学历结构" timg="1" height="208px">
                    <div class="xljg-box flex-around">
                        <div class="chart" ref="xljgChart"></div>
                        <ul class="chart-right">
                            <li class="flex-center" v-for="(item,index) in xljgData.list" :key="index" :style="{color: colorList[index]}"><span class="dian">•</span><span class="name">{{item.education_name}}</span>{{item.percentage}}%</li>
                        </ul>
                    </div>
                </MyContent>
                <MyContent title="公司男女比例" timg="1" height="164px">
                    <div class="nvbl-box flex-around">
                        <div class="nvbl-chart" ref="nvblChart"></div>
                        <div class="nvbl-right">
                            <div class="nan">{{ nnblData.nan }}</div>
                            <div class="nv">{{ nnblData.nv }}</div>
                        </div>
                    </div>
                </MyContent>
                <MyContent title="员工年龄段分布" timg="1" height="246px">
                    <div class="nlfb-box flex-around">
                        <ul class="chart-right">
                            <li class="flex-center" v-for="(item,index) in ygnlList" :key="index" :style="{color: colorList[index]}"><span class="dian">•</span><span class="name">{{item.age_range}}</span>{{item.percentage}}</li>
                        </ul>
                        <div class="chart" ref="nlfbChart"></div>
                    </div>
                </MyContent>
                <MyContent title="工龄年限统计" timg="1" height="211px">
                    <div class="glnx-box" ref="glnxChart"></div>
                </MyContent>
            </div>
            <div class="center">
                <MyContent title="2025年度薪资总体情况 " timg="2" height="953px" :btn="btn3" :btnValue="ndxzData.search" @change="(value)=>handleSearch(value, 'ndxz')">
                    <div class="center-01">
                        <div 
                            class="item animate-item" 
                            v-for="(item,index) in ndxzData.list" 
                            :key="index"
                            :style="{ 'animation-delay': (index * 0.2) + 's' }"
                        >
                            <div class="num">{{ safeAnimatedAmounts[index] }}</div>
                            <div class="name">{{ item.type }}</div>
                        </div>
                        <div class="total animate-total">
                            <div class="num">{{ safeAnimatedTotal }}</div>
                            <div class="name">总费用（元）</div>
                        </div>
                    </div>
                    <div class="center-02 flex-around">
                        <div 
                            class="echarts-progress animate-progress" 
                            :style="{
                                '--value': (item.count/yglxProgressData.total*100).toFixed(2),
                                'animation-delay': (index * 0.1 + 1) + 's'
                            }" 
                            v-for="(item,index) in yglxProgressData.data" 
                            :key="index"
                        >
                            <div class="progress-num">
                                <div class="name">{{item.type_name}}</div>
                                <div class="num">{{(item.count/yglxProgressData.total*100).toFixed(2) || '0'}}%</div>
                            </div>
                        </div>
                    </div>
                </MyContent>
                <MyContent title="部门月度薪酬成本" timg="2" height="194px">
                    <div class="xccb-box" ref="xccbChart"></div>
                </MyContent>
                <MyContent title="合同签署情况" timg="2" height="230px">
                    <div class="scroll-table">
                        <div class="table-head flex-between">
                            <div class="table-item" :style="{width: `${100 / htqsData.head.length}%`}" v-for="(item,index) in htqsData.head" :key="index">{{ item.name }}</div>
                        </div>
                        <div class="table-content">
                            <vue-seamless-scroll 
                                :data="htqsData.data" 
                                :class-option="htqsClassOption"
                                class="seamless-warp"
                            >
                                <div class="table-scroll">
                                    <div 
                                        class="table-row flex-between" 
                                        v-for="(item, index) in htqsData.data" 
                                        :key="`${item.contract_type}-${index}`"
                                    >
                                        <div class="table-item" :style="{width: `${100 / htqsData.head.length}%`}" v-for="(headItem,headIndex) in htqsData.head" :key="headIndex">{{ item[headItem.prop] }}{{ headItem.unit || '' }}</div>
                                    </div>
                                </div>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </MyContent>
                <div class="flex">
                    <MyContent class="center-box" title="各部门考勤数据表" timg="1" height="317px" :btn="btn2" :btnValue="bmkqData.search" @change="(value)=>handleSearch(value, 'bmkq')">
                        <div class="kaoqin-list">
                            <div class="item" v-for="item,index in bmkqData.data" :key="index">
                                <div class="name flex-between">
                                    <div>{{ ((bmkqData.pagination.current_page - 1) * 5 + index + 1) < 10 ? '0'+((bmkqData.pagination.current_page - 1) * 5 + index + 1) : ((bmkqData.pagination.current_page - 1) * 5 + index + 1) }}<span>{{ item.department_name }}</span></div>
                                    <div>出勤率{{ item.attendance_rate }}</div>
                                </div>
                                <div class="progress flex-between">
                                    <span :class="itm <= (item.attendance_rate_value/item.total_employees * 100) ? 'active' : ''" v-for="itm in 100" :key="itm">|</span>
                                </div>
                            </div>
                        </div>
                        <MyPagination :total="bmkqData.pagination.total" :currentPage="Number(bmkqData.pagination.current_page)" :pageSize="5" @change="(page)=>handlePage('bmkq', page)" />
                    </MyContent>
                    <MyContent class="center-box2 ml32" title="人员行为识别预警" timg="1" height="239px" :btn="btn2" :btnValue="ryxwData.search" @change="(value)=>handleSearch(value, 'ryxw')">
                        <div class="ryyj-box">
                            <div class="ryyj-list">
                                <div class="ryyj-item flex-center" :class="`level${item.level}`" v-for="(item,index) in ryxwData.behavior_list" :key="index">
                                    <div class="name">{{ item.employee_name }}</div>
                                    <div>⚠</div>
                                    <div>{{ ['Ⅰ', 'Ⅱ', 'Ⅲ'][item.level] }}级</div>
                                    <div>{{ item.level_description }} - {{ item.violation_type }}</div>
                                </div>
                            </div>
                            <MyPagination :total="ryxwData.pagination.total" :currentPage="Number(ryxwData.pagination.current_page)" :pageSize="ryxwData.pagination.per_page" @change="(page)=>handlePage('ryxw', page)" />
                        </div>
                    </MyContent>
                </div>
                <div class="flex-between">
                    <MyContent class="center-box" title="各员工考勤数据表" timg="1" height="317px" :btn="btn2" :btnValue="ygkqData.search" @change="(value)=>handleSearch(value, 'ygkq')">
                        <div class="kaoqin-list">
                            <div class="item" v-for="item,index in ygkqData.data" :key="index">
                                <div class="name flex-between">
                                    <div>{{ ((ygkqData.pagination.current_page - 1) * 5 + index + 1) < 10 ? '0'+((ygkqData.pagination.current_page - 1) * 5 + index + 1) : ((ygkqData.pagination.current_page - 1) * 5 + index + 1) }}<span>{{ item.employee_name }}</span></div>
                                    <div>出勤率{{ item.attendance_rate }}</div>
                                </div>
                                <div class="progress flex-between">
                                    <span :class="itm <= (item.total_actual_days/item.total_work_days*100) ? 'active' : ''" v-for="itm in 100" :key="itm">|</span>
                                </div>
                            </div>
                        </div>
                        <MyPagination :total="ygkqData.pagination.total" :currentPage="Number(ygkqData.pagination.current_page)" :pageSize="5" @change="(page)=>handlePage('ygkq', page)" />
                    </MyContent>
                    <MyContent class="center-box3" title="员工违规行为排名 " timg="2" height="394px" :btn="btn2" :btnValue="wgxwData.search" @change="(value)=>handleSearch(value, 'wgxw')">
                        <div class="w100 h100" ref="wgxwChart"></div>
                    </MyContent>
                </div>
            </div>
            <div class="right">
                <MyContent title="规章制度公示" timg="1" height="190px">
                    <div class="gzzd-box">
                        <div class="header flex-center">
                            <div class="item" v-for="(item,index) in gzzdData.head" :key="index">{{item.name}}</div>
                        </div>
                        <div class="list">
                            <div class="item flex-center" v-for="(item,index) in gzzdData.data" :key="index">
                                <div class="span">{{item[gzzdData.head[0].prop]}}</div>
                                <div class="span">{{item[gzzdData.head[1].prop]}}</div>
                            </div>
                        </div>
                    </div>
                </MyContent>
                <MyContent title="五险一金购买情况" timg="1" height="400px">
                    <MyList :head="wxyjData.head" :data="wxyjData.data" />
                </MyContent>
                <MyContent title="公司各部门人数 " timg="1" height="381px">
                    <div class="progress-list">
                        <div class="progress-item" v-for="(item, index) in bmrhList" :key="index">
                            <div class="flex-between">
                                <div>{{item.department_name}}</div>
                                <div class="num">{{item.employee_count}}人</div>
                            </div>
                            <div class="progress">
                                <div class="active" :style="{width: (item.employee_count / employeeTotal * 100) +'%'}"></div>
                            </div>
                        </div>
                    </div>
                </MyContent>
                <MyContent title="岗位层级分类 " timg="1" height="211px">
                    <div class="gwcj-box w100 h100" ref="gwcjChart"></div>
                </MyContent>
                <MyContent title="岗位层级类型平均月薪" timg="1" height="371px">
                     <!-- :btn="btn2" :btnValue="pjyxData.search" @change="(value)=>pjyxData.search = value" -->
                    <div class="progress-list">
                        <div class="progress-item" v-for="(item, index) in pjyxData.data" :key="index">
                            <div class="flex-between">
                                <div>{{item.levels ? item.levels[0] : item.salary_formatted}} ({{item.salary_formatted}})</div>
                                <div class="num">{{item.employee_count}}人</div>
                            </div>
                            <div class="progress">
                                <div class="active" :style="{width: (item.employee_count / employeeTotal * 100) +'%'}"></div>
                            </div>
                        </div>
                    </div>
                </MyContent>
            </div>
        </div>
        <div class="bottom flex-between">
            <div class="left">
                <MyContent title="管理岗绩效情况明细" timg="2" height="400px">
                    <MyList :head="gljxData.head" :data="gljxData.list" />
                    <MyPagination :total="gljxData.pagination.total" :currentPage="Number(gljxData.pagination.current_page)" :pageSize="7" :maxVisible="8" @change="(page)=>handlePage('gljx', page)" />
                </MyContent>
            </div>
            <div class="right">
                <MyContent title="员工岗绩效情况明细" timg="2" height="400px">
                    <MyList :head="ygjxData.head" :data="ygjxData.list" />
                    <MyPagination :total="ygjxData.pagination.total" :currentPage="Number(ygjxData.pagination.current_page)" :pageSize="7" :maxVisible="8" @change="(page)=>handlePage('ygjx', page)" />
                </MyContent>
            </div>
        </div>
    </div>
</template>

<script>
import MyContent from '@/components/MyContent.vue'
import MyList from '@/components/MyList.vue'
import MyPagination from '@/components/MyPagination.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts'
import * as API from '@/utils/api';
export default {
    name: 'MyHome',
    components: {
        MyContent,
        MyList,
        MyPagination,
        vueSeamlessScroll,
    },
    data() {
        return {
            btn1: [
                { text: '按天', value: 1 },
                { text: '按月', value: 2 },
                { text: '按年', value: 3 },
            ],
            btn2: [
                { text: '按月', value: 'last_month' },
                { text: '按年', value: 'year' },
            ],
            btn3: [
                { text: '月度', value: 'last_month' },
                { text: '季度', value: 'last_quarter' },
                { text: '年度', value: 'current_year' },
            ],
            employeeTotal: 0,
            ydryData: {
                head: [
                    { name: '月份', prop: 'month', unit: '月' },
                    { name: '入职人数', prop: 'enrollments', unit: '人' },
                    { name: '离职人数', prop: 'separations', unit: '人' },
                    { name: '人力成本', prop: 'labor_cost', unit: '元' },
                ],
                data: []
            },
            qjsrData: {
                search: 'year',
                yearData: [],
                monthData: [],
            },
            colorList: [ '#1FC6FF', '#59FFFF', '#FF2B00', '#F5E74F', '#FF386B', '#FFFFFF', '#1FC6FF', '#59FFFF', '#FF2B00', '#F5E74F', '#FF386B', '#FFFFFF' ],
            xljgData: {
                list: [],
                color1: [
                    '#1FC6FF',
                    '',
                    '#59FFFF',
                    '',
                    '#FF2B00',
                    '',
                    '#F5E74F',
                    '',
                    '#FF386B',
                    '',
                    '#FFFFFF',
                    ''
                ],
                color2: [
                    'rgba(31, 198, 255, 0.25)',
                    '',
                    'rgba(89, 255, 255, 0.25)',
                    '',
                    'rgba(255, 43, 0, 0.25)',
                    '',
                    'rgba(245, 231, 79, 0.25)',
                    '',
                    'rgba(255, 56, 107, 0.25)',
                    '',
                    'rgba(255, 255, 255, 0.25)',
                    ''
                ]
            },
            nnblData: {
                nan: 0,
                nv: 0
            },
            ygnlList: [],
            gljxData: {
                head:[
                    { name: '姓名', prop: 'employee_name' },
                    { name: '月度业绩', prop: 'monthly_performance' },
                    { name: '管理体系', prop: 'management_system' },
                    { name: '人才培养', prop: 'talent_development' },
                    { name: '人才流失', prop: 'talent_loss' },
                    { name: '工作态度', prop: 'work_attitude' },
                    { name: '总得分', prop: 'total_score' },
                ],
                list: [],
                pagination: {
                    current_page: 1,
                    per_page: 0,
                    total: 0,
                    total_pages: 0,
                }
            },
            ygjxData: {
                head:[
                    { name: '姓名', prop: 'employee_name' },
                    { name: '月度业绩', prop: 'monthly_performance' },
                    { name: '管理体系', prop: 'management_system' },
                    { name: '人才培养', prop: 'talent_development' },
                    { name: '人才流失', prop: 'talent_loss' },
                    { name: '总得分', prop: 'total_score' },
                ],
                list: [],
                pagination: {
                    current_page: 1,
                    per_page: 0,
                    total: 0,
                    total_pages: 0,
                }
            },
            ndxzData: {
                search: 'current_year ',
                list: [],
                total: 0,
            },
            yglxProgressData: {
                total: 0,
                data: []
            },
            htqsData: {
                head: [
                    { name: '合同类型', prop: 'contract_type' },
                    { name: '实际人数', prop: 'signed' },
                    { name: '已签', prop: 'signed' },
                    { name: '未签', prop: 'unsigned' },
                    { name: '即将过期', prop: 'expiring' },
                    { name: '已过期', prop: 'expired' },
                ],
                data: [],
            },
            // 合同签署滚动配置
            htqsClassOption: {
                step: 2, // 滚动速度，数值越大速度越快
                limitMoveNum: 2, // 启动无缝滚动最小数据量
                hoverStop: true, // 是否鼠标悬停暂停
                direction: 1, // 滚动方向 0 往下 1 往上
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 40, // 单步运动停止的高度
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            },
            bmkqData: {
                search: 'year',
                data: [],
                pagination: {
                    current_page: 1,
                    per_page: 0,
                    total: 0,
                    total_pages: 0,
                }
            },
            ygkqData: {
                search: 'year',
                data: [],
                pagination: {
                    current_page: 1,
                    per_page: 0,
                    total: 0,
                    total_pages: 0,
                }
            },
            ryxwData: {
                search: 'year',
                behavior_list: [],
                overall_stats: {
                    total_employees: 0,
                    total_minor: 0,
                    total_general: 0,
                    total_serious: 0,
                    total_violations: 0
                },
                pagination: {
                    current_page: 1,
                    per_page: 4,
                    total: 0,
                    total_pages: 0,
                    has_next_page: false,
                    has_prev_page: false
                }
            },
            gzzdData: {
                head: [
                    { name: '文件通知', prop: 'file_name' },
                    { name: '是否生效', prop: 'status_text' },
                ],
                data: []
            },
            wxyjData: {
                head: [
                    { name: '名称', prop: 'name' }, 
                    { name: '实际人数', prop: 'total_count' },
                    { name: '参保人数', prop: 'active_count' },
                    { name: '即将到期', prop: 'expire_count' },
                    { name: '已到期', prop: 'expired_count' },
                ],
                data: []
            },
            bmrhList: [
                { name: '技术部', num: 10, total: 200 },
                { name: '财务部', num: 20, total: 200 },
                { name: '产品部', num: 50, total: 200 },
                { name: '服务部', num: 40, total: 200 },
                { name: '市场部', num: 80, total: 200 },
                { name: '后勤部', num: 102, total: 200 },
                { name: '管理部', num: 110, total: 200 },
                { name: '研发部', num: 90, total: 200 },
            ],
            pjyxData: {
                search: 'year',
                data: []
            },
            wgxwData: {
                search: 'last_month',
                violation_types: [],
                employee_violations: []
            },
            animatedAmounts: [], // 新增：用于存储数字滚动动画的最终值
            animatedTotal: 0, // 新增：用于存储总费用数字滚动动画的最终值
        }
    },

    mounted(){
        this.onQuery()
        this.ndxzDataQuery()
        this.gljxDataQuery()
        this.ygjxDataQuery()
        this.bmkqDataQuery()
        this.ygkqDataQuery()
        this.ryxwDataQuery()
    },
    computed: {
        // 计算属性：安全的数字显示
        safeAnimatedAmounts() {
            if (!this.ndxzData.list) return []
            return this.ndxzData.list.map((item, index) => {
                // 优先使用动画值，否则使用格式化后的原始数据
                return this.animatedAmounts[index] || this.formatNumber(item.amount)
            })
        },
        // 计算属性：安全的总费用显示
        safeAnimatedTotal() {
            // 优先使用动画值，否则使用格式化后的原始数据
            return this.animatedTotal || this.formatNumber(this.ndxzData.total || 0)
        }
    },
    methods: {
        onQuery(){
            // 获取员工总数
            API.getTotal().then(res=>{
                this.employeeTotal = res.data.total_employees
            })
            // 月度人员变动及成本
            API.getRybd().then(res=>{
                this.ydryData.data = res.data.monthly_stats
                // 提取人力成本数据用于部门月度薪酬成本图表
                const costData = res.data.monthly_stats.map(item => item.labor_cost || 0)
                this.setxccbChart(costData)
            })
            // 公司总员工各区间收入
            API.getYgqjsr().then(res=>{
                this.qjsrData.yearData = res.data.current_year.income_distribution
                this.qjsrData.monthData = res.data.last_month.income_distribution
            })
            // 人员学历结构
            API.getYgxl().then(res=>{
                this.xljgData.list = res.data.education_distribution
                this.setxljgChart(this.xljgData.list)
            })
            // 公司男女比例
            API.getNnbl().then(res=>{
                res.data.gender_distribution.forEach(item => {
                    this.nnblData[item.gender==1?'nan':'nv'] = item.count;
                });
                this.setnvblChart(this.nnblData, res.data.total_employees)
            })
            // 员工年龄段分布
            API.getYgnl().then(res=>{
                this.ygnlList = res.data.age_distribution
                this.$nextTick(() => {
                    this.setnlfbChart(this.ygnlList)
                })
            })
            // 工龄年限统计
            API.getGlnx().then(res=>{
                this.setglnxChart(res.data.work_age_distribution)
            })
            // 员工类型占比
            API.getYglx().then(res=>{
                this.yglxProgressData.total = res.data.total_employees
                this.yglxProgressData.data = res.data.type_distribution
            })
            // 合同签署情况
            API.getHtqs().then(res=>{
                this.htqsData.data = res.data.table_data
            })
            // 员工违规行为排名
            this.wgxwDataQuery()
            // 规章制度公示
            API.getGzzd().then(res=>{
                this.gzzdData.data = res.data
            })
            // 五险一金购买情况
            API.getWxyj().then(res=>{
                this.wxyjData.data = res.data.insurance_stats
            })
            // 公司各部门人数
            API.getBmrs().then(res=>{
                this.bmrhList = res.data
            })
            // 岗位层级分类
            API.getGwcj().then(res=>{
                this.setgwcjChart(res.data)
            })
            // 岗位层级类型平均月薪
            API.getGwyx().then(res=>{
                this.pjyxData.data = res.data
            })
        },
        // 2025年度薪资总体情况
        ndxzDataQuery(){
            API.getNdxz({period: this.ndxzData.search}).then(res=>{
                this.ndxzData.list = res.data.salary_stats
                this.ndxzData.total = res.data.total_salary
                
                // 首先设置静态数据，确保有数据显示
                this.animatedAmounts = res.data.salary_stats.map(item => this.formatNumber(item.amount))
                this.animatedTotal = this.formatNumber(res.data.total_salary)
                
                // 延迟启动动画，确保数据先显示
                setTimeout(() => {
                    this.startNumberAnimation(res.data.salary_stats, res.data.total_salary)
                }, 100)
            }).catch(err => {
                // 如果API失败，提供默认数据（模拟API返回格式）
                this.ndxzData.list = [
                    { type: '基本工资', amount: '105,500.00' },
                    { type: '绩效奖金', amount: '21,800.00' },
                    { type: '补贴津贴', amount: '10,400.00' },
                    { type: '加班费', amount: '8,200.00' },
                    { type: '年终奖', amount: '15,000.00' },
                    { type: '其他', amount: '5,500.00' }
                ]
                this.ndxzData.total = '166,400.00'
                this.animatedAmounts = this.ndxzData.list.map(item => this.formatNumber(item.amount))
                this.animatedTotal = this.formatNumber(this.ndxzData.total)
            })
        },
        // 数字滚动动画
        startNumberAnimation(salaryStats, totalSalary) {
            // 为每个薪资项目启动动画
            salaryStats.forEach((item, index) => {
                const targetAmount = this.parseAmount(item.amount) // 使用parseAmount转换字符串为数字
                this.animateNumber(
                    0, 
                    targetAmount, 
                    (value) => {
                        this.$set(this.animatedAmounts, index, this.formatNumber(value))
                    },
                    1500 + (index * 200) // 每个项目延迟200ms
                )
            })
            
            // 总费用动画（延迟最长）
            setTimeout(() => {
                const targetTotal = this.parseAmount(totalSalary) // 使用parseAmount转换字符串为数字
                this.animateNumber(
                    0,
                    targetTotal,
                    (value) => {
                        this.animatedTotal = this.formatNumber(value)
                    },
                    2000
                )
            }, 1000)
        },
        
        // 通用数字动画函数
        animateNumber(start, end, updateCallback, duration = 1000) {
            const startTime = Date.now()
            const difference = end - start
            
            const animate = () => {
                const currentTime = Date.now()
                const elapsed = currentTime - startTime
                const progress = Math.min(elapsed / duration, 1)
                
                // 使用easeOutQuart缓动函数
                const easeProgress = 1 - Math.pow(1 - progress, 4)
                const currentValue = start + (difference * easeProgress)
                
                updateCallback(currentValue)
                
                if (progress < 1) {
                    requestAnimationFrame(animate)
                }
            }
            
            requestAnimationFrame(animate)
        },
        
        // 格式化数字显示
        formatNumber(num) {
            // 数据类型安全检查
            if (num == null || num == undefined) {
                return '0'
            }
            
            // 如果是字符串，先移除逗号和其他非数字字符（保留小数点）
            let numValue = num
            if (typeof num === 'string') {
                numValue = parseFloat(num.replace(/[,\s]/g, ''))
            } else {
                numValue = Number(num)
            }
            
            if (isNaN(numValue)) {
                return '0'
            }
            
            // 直接返回格式化的数字，保持小数点格式
            return numValue.toLocaleString('zh-CN', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2
            })
        },
        
        // 将字符串数字转换为纯数字（用于动画）
        parseAmount(amountStr) {
            if (typeof amountStr === 'string') {
                return parseFloat(amountStr.replace(/[,\s]/g, '')) || 0
            }
            return Number(amountStr) || 0
        },
        // 管理岗绩效情况明细
        gljxDataQuery(page=1){
            API.getGwjx({page, type: 1}).then(res=>{
                this.gljxData = {
                    ...this.gljxData,
                    ...res.data,
                }
            })
        },
        // 员工岗绩效情况明细
        ygjxDataQuery(page=1){
            API.getGwjx({page, type: 2}).then(res=>{
                this.ygjxData = {
                    ...this.gljxData,
                    ...res.data,
                }
            })
        },
        // 各部门考勤数据表
        bmkqDataQuery(page=1){
            API.getBmkq({
                period: this.bmkqData.search,
                page,
                per_page: 5
            }).then(res=>{
                this.bmkqData.data = res.data.department_attendance_list
                this.bmkqData.pagination = res.data.pagination
            })
        },
        // 各员工考勤数据表
        ygkqDataQuery(page=1){
            API.getYgkq({
                period: this.ygkqData.search,
                page,
                per_page: 5
            }).then(res=>{
                this.ygkqData.data = res.data.attendance_list
                this.ygkqData.pagination = res.data.pagination
            })
        },
        // 人员行为识别预警
        ryxwDataQuery(page=1){
            API.getXwsb({
                page,
                period: this.ryxwData.search
            }).then(res=>{
                this.ryxwData.behavior_list = res.data.behavior_list
                this.ryxwData.overall_stats = res.data.overall_stats
                this.ryxwData.pagination = res.data.pagination
            })
        },
        // 员工违规行为排名
        wgxwDataQuery(){
            API.getWgxw({
                period: this.wgxwData.search
            }).then(res=>{
                this.wgxwData.violation_types = res.data.violation_types
                this.wgxwData.employee_violations = res.data.employee_violations
                this.setwgxwChart(res.data)
            })
        },
        // 监听页数变化
        handlePage(type, page){
            if(type == 'bmkq'){
                // 部门考勤
                this.bmkqDataQuery(page)
            }
            if(type == 'ygkq'){
                // 员工考勤
                this.ygkqDataQuery(page)
            }
            if(type == 'gljx'){
                // 管理绩效
                this.gljxDataQuery(page)
            }
            if(type == 'ygjx'){
                // 员工绩效
                this.ygjxDataQuery(page)
            }
            if(type == 'ryxw'){
                // 人员行为识别预警
                this.ryxwDataQuery(page)
            }
        },
        // 监听筛选条件
        handleSearch(value, type){
            if(type == 'bmkq'){
                // 各部门考勤数据表
                this.bmkqData.search = value
                this.bmkqDataQuery()
            }
            if(type == 'ygkq'){
                // 各员工考勤数据表
                this.ygkqData.search = value
                this.ygkqDataQuery()
            }
            if(type == 'ryxw'){
                // 人员行为识别预警
                this.ryxwData.search = value
                this.ryxwDataQuery()
            }
            if(type == 'ndxz'){
                // 2025年度薪资总体情况
                this.ndxzData.search = value
                this.ndxzDataQuery()
            }
            if(type == 'wgxw'){
                // 员工违规行为排名
                this.wgxwData.search = value
                this.wgxwDataQuery()
            }
        },
        // 人员学历结构
        setxljgChart(data = []) {
            const chart = echarts.init(this.$refs.xljgChart)

            const colorList = this.xljgData.color1
            const colorList1 = this.xljgData.color2
            const chartdata = data.map(item => {
                return {
                    name: item.education_name,
                    value: item.count
                }
            });
            const data1 = []
            chartdata.forEach((item) => {
                const _item = { ...item }
                if (!_item.value) {
                    _item.value = 0
                }
                data1.push(_item, {
                    name: '',
                    value: 0 / 100,
                    labelLine: {
                        show: false,
                        lineStyle: {
                            color: 'transparent'
                        }
                    },
                    itemStyle: {
                        color: 'transparent'
                    }
                })
            })

            chart.setOption({
                series: [
                    {
                        type: 'pie',
                        radius: ['70%', '76%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        startAngle: 180,
                        minAngle: 5,
                        emphasis: {
                            scale: true,
                            scaleSize: 3,
                            focus: 'series',
                            blurScope: 'coordinateSystem',
                            label: {
                                show: true
                            }
                        },
                        label: {
                            show: false,
                            position: 'center',
                            formatter: function (params) {
                                const percent = params.percent ? params.percent.toFixed(1) : '0.0';
                                return `{percentage|${percent}%}\n{name|${params.name}}`;  // 保留1位小数
                            },
                            // formatter: '{percentage|{d}%}' + '\n\r' + '{name|{b}}',  // 保留2位小数
                            rich: {
                                percentage: {
                                    fontSize: 24,
                                    fontFamily: "微软雅黑",
                                    color: '#ffffff',
                                    lineHeight: 40,
                                },
                                name: {
                                    fontFamily: "微软雅黑",
                                    fontSize: 12,
                                    color: '#B4C0CC',
                                },
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data: data1,
                        z: 1
                    },
                    {
                        type: 'pie',
                        radius: ['50%', '65%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        startAngle: 180,
                        minAngle: 5,
                        emphasis: {
                            scale: false,
                            scaleSize: 15,
                            focus: 'series',
                            blurScope: 'coordinateSystem'
                        },
                        label: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colorList1[params.dataIndex]
                                }
                            }
                        },
                        data: data1,
                        z: 2
                    },
                ]
            })
        },
        // 公司男女比例
        setnvblChart(data = {}, total = 0){
            const chart = echarts.init(this.$refs.nvblChart)
            chart.setOption({
                backgroundColor: 'transparent',
                title: {
                    text: total,
                    left: 'center',
                    top: '30%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 26,
                        fontWeight: 500,
                    },
                    subtext: `总人数`,
                    subtextStyle: {
                        color: '#B4C0CC',
                        fontSize: 12
                    }
                },
                polar: {
                    radius: ['40%', '50%'],
                    center: ['50%', '50%']
                },
                // 极坐标角度轴
                angleAxis: {
                    min: 0,
                    max: 100,
                    startAngle: 0,
                    endAngle: 360,
                    clockwise: true,
                    show: false, // 隐藏刻度线
                },
                // 极坐标径向轴
                radiusAxis: {
                    type: 'category',
                    // 隐藏极坐标轴线
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    }
                },
                series: [
                    {
                        clockwise: true,
                        hoverAnimation: false,
                        legendHoverLink: false,
                        hoverOffset: 0,
                        type: 'pie',
                        radius: ['88%', '88%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            borderColor: '#1FC6FF52',
                            borderWidth: 2
                        },
                        data: [{ value: 0 }]
                    },
                    {
                        clockwise: true,
                        hoverAnimation: false,
                        legendHoverLink: false,
                        hoverOffset: 0,
                        type: 'pie',
                        startAngle: -45,
                        endAngle: -405,
                        radius: ['70%', '76%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: data.nan,
                                title: '男',
                                itemStyle: {
                                    color: `#1FC6FF`,
                                    borderRadius: 20,
                                },
                            },
                            {
                                value: data.nv,
                                title: '女',
                                itemStyle: {
                                    color: `#FF386BF0`,
                                    borderRadius: 20,
                                },
                            }
                        ]
                    }
                ]
            })
        },
        // 员工年龄段分布
        setnlfbChart(data = []){
            if (!this.$refs.nlfbChart || !data || data.length === 0) {
                return;
            }
            
            const chart = echarts.init(this.$refs.nlfbChart)
            let dataArray = data.map(item=>{
                // 将百分比字符串转换为数值
                const percentageStr = item.percentage || item.value || '0%';
                const percentageValue = typeof percentageStr === 'string' 
                    ? parseFloat(percentageStr.replace('%', '')) 
                    : percentageStr || 0;
                    
                return {
                    name: item.age_range,
                    value: percentageValue,
                    count: item.count,
                    originalPercentage: percentageStr
                }
            })
            
            let series = [],
                legend = [];
            dataArray.forEach((item, index) => {
                const radius = 122 - (index + 1) * 20;
                series.push({
                    name: item.name,
                    type: "gauge",
                    center: ["50%", "50%"],
                    startAngle: 90,
                    endAngle: -270,
                    clockwise: true,
                    radius: radius,
                    min: 0,
                    max: 100,
                    itemStyle: {
                        color: this.colorList[index],
                    },
                    progress: {
                        show: true,
                        width: 12,
                        roundCap: false,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        roundCap: false,
                        lineStyle: {
                            width: 12,
                            color: [[1, "#2b4070"]],
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    anchor: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [{
                        value: item.value,
                        count: item.count,
                        originalPercentage: item.originalPercentage
                    }],
                });
            });
            const option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(31, 198, 255, 0.16)',
                    borderWidth: 0,
                    formatter: function (params) {
                        const count = params.data.count || 0;
                        const percentage = params.data.originalPercentage || '0%';
                        return `${params.seriesName}<br/>人数: ${count}人<br/>占比: ${percentage}`;
                    },
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 14
                    }
                },
                legend: legend,
                xAxis: [
                    {
                        show: false,
                    },
                ],
                yAxis: [
                    {
                        show: false,
                    },
                ],
                series: series,
            }
            
            chart.setOption(option, true)
            
            // 确保图表正确渲染
            chart.resize()
        },
        // 工龄年限统计
        setglnxChart(data = []){
            const chart = echarts.init(this.$refs.glnxChart)
            const x = data.map(item=>item.work_age_range)
            const data1 = data.map(item=>item.count)
            chart.setOption({
                backgroundColor: 'transparent',
                grid: {
                    top: 20,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    // 是否包含文本
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    data: x,
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#3C6579',
                            width: '2', //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#A2B0B8', //底部文字颜色
                            fontSize: 12,
                        },
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'transparent', //左边框颜色
                            },
                        },
                        axisTick: { show: false },
                        axisLabel: {
                            show: true,
                            fontSize: 14,
                            textStyle: {
                                color: '#A2B0B8', //左文字颜色
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2C3441',
                                type: 'dashed'
                            }
                        }
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        barGap: '-82%', // 与主柱子重叠
                        barWidth: 24,
                        itemStyle: {
                            color: 'transparent',
                        },
                        data: data1,
                        z: -1,
                        zlevel: 0,
                        showBackground: true,
                        backgroundStyle: {
                            borderColor: '#1FC6FF55',
                            borderWidth: 2,
                        },
                        tooltip: { show: false },
                    },
                    {
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            color: '#1FC6FF',
                        },
                        data: data1,
                        z: 0,
                        zlevel: 0,
                    },
                    {
                        type: 'pictorialBar',
                        barWidth: 15,
                        itemStyle: {
                            color: '#253855', //数据的间隔颜色
                        },
                        symbolRepeat: 'true',
                        symbolMargin: 4,
                        symbol: 'rect',
                        symbolSize: [19, 2],
                        data: data1,
                        z: 1,
                        zlevel: 0,
                        tooltip: { show: false },
                    },
                ],
            })
        },
        // 部门月度薪酬成本
        setxccbChart(costData = []){
            const chart = echarts.init(this.$refs.xccbChart)
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(31, 198, 255, 0.16)',
                    borderWidth: 0,
                    height: 26,
                    formatter: function (params) {
                        let result = params[0].axisValue;
                        params.forEach(item => {
                            result += item.seriesName + '：￥' + item.data;
                        });
                        return result;
                    },
                    textStyle: {
                        color: '#FFFFFF',
                        height: 26
                    }
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: '#fff',
                        padding: [0, 0, 6, 0]
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#2C3441',
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: false,
                        symbol: ['none', 'arrow'],
                        symbolSize: [10, 15],
                        symbolOffset: [0, 0],
                        lineStyle: {
                            width: 2,
                            color: 'rgba(255,255,255,0.6)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            show: true,
                            color: '#A2B0B8',
                            fontSize: '12'
                        }
                    },
                },
                xAxis: {
                    name: '',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    type: 'category',
                    itemStyle: {
                        borderColor: 'blue',
                        color: '#ffffff'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#3C6579',
                            width: '2', //坐标线的宽度
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 0,
                        textStyle: {
                            show: true,
                            color: '#A2B0B8',
                            fontSize: '12'
                        }
                    },
                },
                grid: {
                    left: 10,
                    top: 20,
                    right: 0,
                    bottom: 0,
                    containLabel: true
                },
                series: [{
                    data: costData,
                    name: '',
                    type: 'line',
                    symbol: 'circle',
                    smooth: false,//是否平滑
                    showAllSymbol: true,
                    symbolSize: 10,//不需要点就设置0
                    lineStyle: {
                        width: 2,
                        type: 'solid',
                        color: "#1FC6FF"
                    },
                    itemStyle: {
                        borderWidth: 0,
                        color: 'transparent'
                    },
                    areaStyle: {
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(31, 198, 255, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(31, 198, 255, 0)'
                            }
                            ], false),
                            shadowColor: 'rgba(31, 198, 255, 0)',
                            shadowBlur: 20
                        }
                    }
                }]
            })
        },
        // 岗位层级分类
        setgwcjChart(data = []){
            const chart = echarts.init(this.$refs.gwcjChart)
            const seriesData = data.map((item, index)=>{
                return {
                    value: data[index].num,
                    label: {
                        show: true,
                        position: 'top',
                        offset: [0, 0],
                        distance: 0,
                        color: '#fff',
                        fontSize: 12,
                        backgroundColor: {
                            width: 40,
                            height: 16,
                            image: ''
                        },
                        align: 'center',
                        padding: [4, 8, 6],
                    },
                    itemStyle: {
                        color: {
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#0055FF00'
                                },
                                {
                                    offset: 1,
                                    color: '#158EFF',
                                }
                            ],
                        },
                        borderColor: '#15B1FF',
                        borderWidth: 3
                    },
                    symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
                }
            })
            chart.setOption({
                grid: {
                    top: 30,
                    left: 30,
                    right: 0,
                    bottom: 20
                },
                xAxis: {
                    type: 'category',
                    axisTick: false,
                    axisLabel: {
                        textStyle: {
                            color: '#A2B0B8', //底部文字颜色
                            fontSize: 11,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(101,161,189)',
                            width: 1,
                        }
                    },
                    data: data.map(item=>item.level_name)
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#A2B0B8', //底部文字颜色
                            fontSize: 12,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#2C3441',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: "pictorialBar",
                    },
                ]
            })
        },
        // 员工违规行为排名
        setwgxwChart(responseData = {}){
            const chart = echarts.init(this.$refs.wgxwChart)
            
            // 从响应数据中提取violation_types和employee_violations
            const { violation_types = {}, employee_violations = [] } = responseData
            
            // 颜色列表
            const colors = ['#458EE2', '#38FF49', '#FFD15C', '#FF386B', '#FF2B00', '#C5E0B4']
            
            // 动态生成legend
            const legend = Object.values(violation_types).map((name, index) => ({
                name: name,
                color: colors[index] || '#FFFFFF',
                mod: name // 使用中文名称作为mod
            }))
            
            // 处理数据，将violation_details转换为图表需要的格式
            const data = employee_violations.map(item => ({
                employee_name: item.employee_name || '未知',
                total_violations: item.total_violations || 0,
                ...item.violation_details
            })).sort((a, b) => b.total_violations - a.total_violations) // 按违规次数从高到低排序
            
            const maxValuesList = [];
            const seriesData = legend.map(item=>{
                maxValuesList.push(Math.max(...data.map(itm => itm[item.mod] || 0)))
                return {
                    ...item,
                    type: 'bar',
                    stack: 'stack',
                    itemStyle: {
                        borderWidth: 4,
                        borderColor: 'transparent',
                        borderRadius: 2,
                    },
                    barWidth: 24,
                    data: data.map(itm=>itm[item.mod] || 0),
                }
            })
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: 60,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    itemWidth: 5,
                    itemHeight: 5,
                    top: 0,
                    left: 0,
                    textStyle: {
                        color: '#B4C0CC'
                    }
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#A2B0B8',
                            fontSize: 14
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#3C6579',
                            width: '2', //坐标线的宽度
                        }
                    },
                    data: data.map(item=>item.employee_name)
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#A2B0B8',
                        fontSize: 14
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#2C3441',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barGap: '-92%',
                        barWidth: 28,
                        itemStyle: {
                            color: 'transparent',
                            
                        },
                        data: maxValuesList,
                        z: -2,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#1FC6FF22',
                            borderColor: '#1FC6FF33',
                            borderWidth: 2,
                        },
                        tooltip: { show: false },
                        silent: true, // 禁用交互
                    },
                    ...seriesData,
                ]
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .my-home{
        width: 100%;
        .top, .bottom{
            align-items: start;
        }
        .top{
            .left{ 
                width: 430px;
                .xljg-box, .nlfb-box{
                    padding: 5px 40px;
                    .chart{
                        width: 164px;
                        height: 164px;
                        background: url(@/assets/img/img_07.png) center no-repeat;
                        background-size: 100%;
                    }
                    .chart-right {
                        list-style: none;
                        padding: 0;
                        margin-left: 20px;
                        li {
                            color: #fff;
                            font-size: 14px;
                            font-weight: 300;
                            font-size: 14px;
                            span {
                                &.dian{
                                    font-size: 20px;
                                }
                                &.name{
                                    color: #B4C0CC;
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
                .nlfb-box{
                    padding: 5px 0;
                    .chart{
                        width: 204px;
                        height: 204px;
                        background: none;
                    }
                    .chart-right {
                        margin-left: 0;
                    }
                }
                .glnx-box{
                    height: 100%;
                    height: 100%;
                }
                .nvbl-box{
                    .nvbl-chart{
                        width: 136px;
                        height: 136px;
                    }
                    .nvbl-right{
                        width: 214px;
                        height: 108px;
                        background: url(@/assets/img/sex.png) center no-repeat;
                        background-size: 100%;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 26px;
                        text-align: center;
                        div{
                            width: 100%;
                            height: 54px;
                        }
                        .nan{
                            color: #1FC6FF;
                            line-height: 40px;
                            margin-left: -20px;
                        }
                        .nv{
                            color: #F63768;
                            line-height: 64px;
                        }
                    }
                }
            }
            .center{
                flex: 1;
                margin: 0 32px;
                position: relative;
                .center-01{
                    width: calc(100% + 30px);
                    height: 730px;
                    text-align: center;
                    background-color: #000F2E;
                    margin: -19px 0 0 -15px;
                    position: relative;
                    background: url(@/assets/img/img_02.png) center 460px no-repeat, url(@/assets/img/line_h.png) left bottom repeat-x, url(@/assets/img/img_04.png) center bottom no-repeat #000F2E;
                    
                    .item{
                        width: 156px;
                        height: 140px;
                        background: url(@/assets/img/img_01.png) center bottom no-repeat;
                        background-size: 100%;
                        position: absolute;
                        opacity: 0;
                        transform: translateY(20px) scale(0.8);
                        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                        
                        &.animate-item {
                            animation: itemFadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
                        }
                        
                        &:nth-child(1){
                            left: 50px;
                        }
                        &:nth-child(2){
                            left: 110px;
                        }
                        &:nth-child(3){
                            left: 290px;
                        }
                        &:nth-child(4){
                            right: 290px;
                        }
                        &:nth-child(5){
                            right: 110px;
                        }
                        &:nth-child(6){
                            right: 50px;
                        }
                        &:nth-child(1),&:nth-child(6){
                            top: 370px;
                        }
                        &:nth-child(2),&:nth-child(5){
                            top: 180px;
                        }
                        &:nth-child(3),&:nth-child(4){
                            top: 30px;
                        }
                        .num{
                            color: #4DE4FF;
                            font-weight: 900;
                            font-size: 26px;
                            text-shadow: 0 0 10px rgba(77, 228, 255, 0.5);
                            transition: all 0.3s ease;
                            
                            &:hover {
                                transform: scale(1.1);
                                text-shadow: 0 0 20px rgba(77, 228, 255, 0.8);
                            }
                        }
                        .name{
                            color: #FFFFFF80;
                            font-weight: 100;
                            font-size: 16px;
                        }
                        
                        // 悬停效果
                        &:hover {
                            transform: translateY(-5px) scale(1.05);
                            box-shadow: 0 10px 25px rgba(31, 198, 255, 0.3);
                        }
                    }
                    .total{
                        width: 306px;
                        height: 306px;
                        background: url(@/assets/img/img_03.png) center no-repeat;
                        position: absolute;
                        top: 47%;
                        left: 50%;
                        transform: translate(-50%, -50%) scale(0.5);
                        opacity: 0;
                        transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
                        
                        &.animate-total {
                            animation: totalFadeInScale 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
                        }
                        
                        .num{
                            color: #4DE4FF;
                            font-weight: 900;
                            font-size: 50.05px;
                            line-height: 38.05px;
                            margin: 120px 0 20px;
                            text-shadow: 0 0 15px rgba(77, 228, 255, 0.6);
                            transition: all 0.3s ease;
                            
                            &:hover {
                                transform: scale(1.05);
                                text-shadow: 0 0 25px rgba(77, 228, 255, 0.9);
                            }
                        }
                        .name{
                            font-weight: 400;
                            font-size: 20px;
                            line-height: 26.64px;
                            color: #00A0E9;
                        }
                        
                        // 悬停效果
                        &:hover {
                            transform: translate(-50%, -50%) scale(1.02);
                            filter: drop-shadow(0 0 20px rgba(0, 160, 233, 0.4));
                        }
                    }
                }
                .center-02{
                    height: 214px;
                    padding: 0 10px;
                    .echarts-progress {
                        &:nth-child(1){
                            --color: #FDEF05;
                        }
                        &:nth-child(2){
                            --color: #458EE2;
                        }
                        &:nth-child(3){
                            --color: #C5E0B4;
                        }
                        &:nth-child(4){
                            --color: #FF386B;
                        }
                        &:nth-child(5){
                            --color: #A9D18E;
                        }
                        --size: 138px;
                        --track: rgba(#fff, 0.1);
                        width: var(--size);
                        height: var(--size);
                        border-radius: 50%;
                        background: conic-gradient(var(--color) 0% 0%, var(--track) 0% 100%);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        opacity: 0;
                        transform: translateY(30px) scale(0.8);
                        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                        
                        &.animate-progress {
                            animation: progressFadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                                      spinProgress 1.5s ease-out forwards;
                        }
                        
                        // 悬停效果
                        &:hover {
                            transform: translateY(0) scale(1.05);
                            filter: drop-shadow(0 5px 15px var(--color));
                        }
                    }
            
                    .progress-num {
                        width: calc(var(--size) * 0.83);
                        height: calc(var(--size) * 0.83);
                        background: url(@/assets/img/bg.jpg) repeat;
                        border-radius: 50%;
                        text-align: center;
                        color: #FFFFFF;
                        transition: all 0.3s ease;
                        
                        .name{
                            margin: 25px 0 2px;
                            font-weight: 300;
                            font-size: 12px;
                            letter-spacing: 5%;
                            transition: all 0.3s ease;
                        }
                        .num{
                            font-weight: 400;
                            font-size: 24px;
                            transition: all 0.3s ease;
                        }
                        
                        // 悬停时文字高亮
                        &:hover {
                            .name, .num {
                                color: var(--color);
                                text-shadow: 0 0 10px var(--color);
                            }
                        }
                    }
            
                    /* 优化的进度动画 */
                    @keyframes spinProgress {
                        0% { 
                            background: conic-gradient(var(--color) 0% 0%, var(--track) 0% 100%);
                            transform: rotate(0deg);
                        }
                        100% { 
                            background: conic-gradient(var(--color) 0% calc(var(--value) * 1%), var(--track) calc(var(--value) * 1%) 100%);
                            transform: rotate(360deg);
                        }
                    }
                }
                .xccb-box{
                    width: 100%;
                    height: 100%;
                }
                .center-box {
                    width: 487px;
                    .kaoqin-list{
                        padding: 0 10px;
                        height: 250px;
                        font-size: 12px;
                        font-weight: 300;
                        overflow-y: auto;
                        .item{
                            margin-bottom: 12px;
                            .name{
                                color: #00E8E8;
                                span{
                                    color: #FFFFFFDE;
                                    margin-left: 10px;
                                }
                            }
                            .progress{
                                user-select: none;
                                margin: 5px 0 6px;
                                height: 16px;
                                cursor: pointer;
                                &:hover{
                                    span.active{
                                        color: #00E8E8;
                                    }
                                }
                                span{
                                    font-size: 9px;
                                    line-height: 0;
                                    font-weight: 700;
                                    color: rgba(#fff, 0.5);
                                    &.active{
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
                .center-box2 {
                    width: 430px;
                    .ryyj-box{
                        height: 100%;
                        position: relative;
                        .ryyj-list{
                            overflow: hidden;
                            .ryyj-item{
                                height: 32px;
                                margin: 5px 0 13px;
                                &.level0{
                                    background: rgba(255, 255, 255, 0.1);
                                    border: 1px solid rgba(255, 255, 255, 0.3);
                                    border-left: 2px solid rgba(255, 255, 255, 0.627);
                                }
                                &.level1{
                                    background: url(@/assets/img/img_06.png) center no-repeat;
                                    background-size: 100%;
                                }
                                &.level2{
                                    background: url(@/assets/img/img_05.png) center no-repeat;
                                    background-size: 100%;
                                }
                                div{
                                    color: #fff;
                                    font-weight: 300;
                                    font-size: 14px;
                                    margin-right: 16px;
                                    &.name{
                                        width: 68px;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                        .my-pagination{
                            right: 0;
                            bottom: 0;
                        }
                    }
                }
                .center-box3 {
                    width: 891px;
                    position: absolute;
                    bottom: 0;
                    right: -462px;
                }
                .ml32{
                    margin-left: 32px;
                }
            }
            .right{
                width: 430px;
                .gzzd-box{
                    text-align: center;
                    font-weight: 400;
                    .header{
                        margin-bottom: 8px;
                        .item{
                            border: 1px solid #1FC6FF;
                            font-size: 16px;
                            line-height: 32px;
                            color: #9DB5DB;
                            background: rgba(31, 198, 255, 0.2);
                            &:first-child{
                                width: 280px;
                            }
                            &:last-child{
                                width: 115px;
                            }
                        }
                    }
                    .list{
                        height: 120px;
                        overflow-y: auto;
                        .item{
                            .span{
                                line-height: 40px;
                                color: #fff;
                                font-size: 13px;
                                &:first-child{
                                    font-size: 14px;
                                    text-decoration: underline;
                                    text-decoration-style: solid;
                                    width: 280px;
                                }
                                &:last-child{
                                    width: 115px;
                                }
                            }
                            &:hover{
                                background: rgba(54, 94, 114, 0.2);
                                .span{
                                    &:first-child{
                                        color: #458EE2;
                                    }
                                }
                            }
                        }
                    }
                }
                .bmrs-list{
                    .bmrs-item{
                        font-size: 16px;
                        line-height: 24px;
                        color: #fff;
                        padding: 10px 0;
                        .name{
                            font-weight: 400;
                        }
                        .num{
                            font-weight: 300;
                            color: #C6D1DB;
                        }
                        .progress{
                            height: 12px;
                            background: #1FC6FF;
                            margin: 0 16px;
                        }
                    }
                }
            }
            .progress-list{
                padding: 0 10px;
                .progress-item{
                    color: #FF386B;
                    height: 48px;
                    margin: 15px 0;
                    &:nth-child(1){
                        color: #FFD15C;
                        .active{
                            background: #FFD15C;
                        }
                    }
                    &:nth-child(2){
                        color: #458EE2;
                        .active{
                            background: #458EE2;
                        }
                    }
                    &:nth-child(3){
                        color: #C5E0B4;
                        .active{
                            background: #C5E0B4;
                        }
                    }
                    &:nth-child(4){
                        color: #38FF49;
                        .active{
                            background: #38FF49;
                        }
                    }
                    .num{
                        font-weight: 300;
                        font-size: 16px;
                        color: #C6D1DB;
                    }
                    .progress{
                        height: 12px;
                        background: rgba(#fff, 0.1);
                        margin-top: 12px;
                    }
                    .active{
                        height: 12px;
                        background: #FF386B;
                    }
                }
            }
        }
        .bottom{
            width: 100%;
            .left, .right{
                width: calc(50% - 16px);
            }
        }
    }
    
    // 合同签署滚动表格样式
    .scroll-table {
        height: 100%;
        max-height: 100%;
        
        .table-head {
            margin-bottom: 8px;
            background: rgba(31, 198, 255, 0.2);
            
            .table-item {
                font-weight: 400;
                color: #B4C0CC;
                text-align: center;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 8px;
                box-sizing: border-box;
            }
        }
        
        .table-content {
            height: calc(100% - 48px);
            max-height: calc(100% - 48px);
            overflow: hidden;
            position: relative;
            
            .seamless-warp {
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            
            .table-scroll {
                .table-row {
                    height: 40px;
                    
                    .table-item {
                        color: #fff;
                        text-align: center;
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        padding: 0 8px;
                        box-sizing: border-box;
                        position: relative;
                        cursor: pointer;
                        
                        /* 悬停时显示完整文字 */
                        &:hover {
                            white-space: normal;
                            text-overflow: initial;
                            overflow: visible;
                            height: auto;
                            min-height: 40px;
                            background: rgba(0, 15, 46, 0.95);
                            border: 1px solid rgba(31, 198, 255, 0.5);
                            border-radius: 4px;
                            z-index: 100;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                            word-break: break-word;
                            line-height: 1.4;
                            padding: 8px;
                        }
                    }
                }
            }
        }
    }
    
    /* 动画关键帧定义 */
    @keyframes itemFadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(0.8);
        }
        60% {
            opacity: 0.8;
            transform: translateY(-5px) scale(1.05);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes totalFadeInScale {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
        }
        50% {
            opacity: 0.7;
            transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
        }
    }
    
    @keyframes progressFadeInUp {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.8);
        }
        60% {
            opacity: 0.8;
            transform: translateY(-10px) scale(1.05);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* 全局脉冲效果 */
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(31, 198, 255, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(31, 198, 255, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(31, 198, 255, 0);
        }
    }
    
    /* 数字发光效果 */
    @keyframes numberGlow {
        0%, 100% {
            text-shadow: 0 0 10px rgba(77, 228, 255, 0.5);
        }
        50% {
            text-shadow: 0 0 20px rgba(77, 228, 255, 0.8), 0 0 30px rgba(77, 228, 255, 0.6);
        }
    }
</style>
